import React, { PureComponent } from 'react'
import Home from './Home';
import Recommad from './Recommad';
import Profile from './Profile';

export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      message: 'hello word',
      counter: 0
    }
  }
  // shouldComponentUpdate(nextProps, nextState) {
  //     if (this.state.message !== nextState.message || this.state.counter !== nextState.counter) {
  //         return true
  //     }
  //     return false;
  // }
  changeText () {
    this.setState({
      message: "你好 jack"
    })
  }
  changeCounter () {
    this.setState({
      counter: this.state.counter + 1,
    })
  }
  render () {
    console.log('App render');
    const { message, counter } = this.state;
    return (
      <div>
        <p>App</p>
        {/* 更新message Home 和Recommand 组件因该不需要更新，但是setState修改之后，会重新
                调用render 方法 ； 
                React 提供方法 shouldComponentUpdate() */}
        <p>{message}--{counter}</p>
        <button onClick={() => this.changeText()}>修改文本</button>
        <button onClick={() => this.changeCounter()}>计数</button>
        <Home message={message} />
        <Recommad counter={counter} />
        <Profile message={message} />
      </div>

    )
  }
}

export default App